<template>
  <div class="register">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <main>
      <div class="portrait">
        <img src="../../assets/image/login.png" alt="" />
      </div>
      <van-cell-group inset>
        <van-cell
          title="英文名"
          is-link
          @click="showEname = true"
          :value="Ename"
        />
        <van-cell
          title="中文名"
          is-link
          @click="showCname = true"
          :value="Cname"
        />
        <van-cell
          title="生日"
          is-link
          @click="showBirth = true"
          :value="Birth"
        />
        <van-cell title="性别" is-link @click="showSex = true" :value="sex" />
        <van-popup v-model:show="showEname">
          <div class="set_card">
            <p>English name</p>
            <input
              type="text"
              class="input_card"
              v-model="addEname"
              placeholder="新名字"
            />
            <van-button class="btn" type="primary" @click="setEname()"
              >保存</van-button
            >
            <van-button class="btn" type="default" @click="showEname = false"
              >取消</van-button
            >
          </div>
        </van-popup>
        <van-popup v-model:show="showCname">
          <div class="set_card">
            <p>中文名</p>
            <input
              type="text"
              class="input_card"
              v-model="addCname"
              placeholder="新名字"
            />
            <van-button class="btn" type="primary" @click="setCname()"
              >保存</van-button
            >
            <van-button class="btn" type="default" @click="showCname = false"
              >取消</van-button
            >
          </div>
        </van-popup>
        <van-popup v-model:show="showBirth">
          <div class="set_card set_date">
            <van-datetime-picker
              v-model="currentDate"
              @confirm="setBirth"
              @cancel="showBirth = false"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
            />
          </div>
        </van-popup>
        <van-popup v-model:show="showSex">
          <div class="set_card set_sex">
            <div @click="sex = 'boy'">
              <div class="active" v-if="sex == 'boy'"></div>
              <img
                src="@/assets/image/Login_Complete_boy.png"
                alt=""
                @click="boy"
              />
              <h3 :class="sex == 'boy' ? 'active' : ''">男孩</h3>
            </div>
            <div @click="sex = 'girl'">
              <div class="active" v-if="sex == 'girl'"></div>
              <img
                src="@/assets/image/Login_Complete_girl.png"
                alt=""
                @click="giry"
              />
              <h3 :class="sex == 'girl' ? 'active' : ''">女孩</h3>
            </div>
          </div>
        </van-popup>
      </van-cell-group>
      <van-button
        @click="save"
        class="out_login"
        type="primary"
        size="normal"
        round
        >保存</van-button
      >
    </main>
  </div>
</template>

<script>
import { ref } from "vue";
import {
  Cell,
  // Toast,
  CellGroup,
  NavBar,
  Button,
  Popup,
  DatetimePicker,
} from "vant";
export default {
  setup() {
    const currentDate = ref(new Date(2010, 0, 1));

    const showEname = ref(false);
    const Ename = ref(localStorage.getItem("Ename") || "new user");
    const addEname = ref("");
    const setEname = () => {
      showEname.value = false;
      if (addEname.value != "") {
        localStorage.setItem("Ename", addEname.value);
        Ename.value = addEname.value;
        addEname.value = "";
      }
    };

    const showCname = ref(false);
    const Cname = ref(localStorage.getItem("Cname") || "新用户");
    const addCname = ref("");
    const setCname = () => {
      showCname.value = false;
      if (addCname.value != "") {
        localStorage.setItem("Cname", addCname.value);
        Cname.value = addCname.value;
        addCname.value = "";
      }
    };

    const showBirth = ref(false);
    const Birth = ref(localStorage.getItem("Birth") || "2010-01-01");
    const setBirth = (val) => {
      let nowDate = val.toLocaleDateString().split("/").join("-");
      localStorage.setItem("Birth", nowDate);
      Birth.value = nowDate;
      showBirth.value = false;
    };

    const showSex = ref(false);
    const sex = ref(localStorage.getItem("sex") || "boy");
    return {
      showEname,
      Ename,
      addEname,
      setEname,

      showCname,
      Cname,
      addCname,
      setCname,

      showBirth,
      Birth,
      setBirth,
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate,

      showSex,
      sex,
    };
  },
  data() {
    return {};
  },
  methods: {
    eName() {
      this.eNameShow = true;
    },
    onClickLeft() {
      // Toast("返回");
      this.$router.go(-1);
    },
    save() {
      sessionStorage.setItem("homePage", 1);
      this.$router.push("/");
    },
  },
  components: {
    "van-cell-group": CellGroup,
    "van-cell": Cell,
    "van-nav-bar": NavBar,
    "van-button": Button,
    "van-popup": Popup,
    "van-datetime-picker": DatetimePicker,
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-popup {
  border-radius: 25px;
}
.set_card {
  width: 300px;
  height: 180px;
  text-align: center;
  line-height: 46px;
  p {
    margin-top: 10px;
  }
  .input_card {
    width: 80%;
    border-radius: 5px;
    border: 1px solid #ccc;
    line-height: 36px;
    margin: 10px 0;
    box-shadow: none;
    padding: 0 10px;
  }
  .btn {
    padding: 0 20px;
    margin: 0 5px;
  }
}
.set_sex {
  display: flex;
  justify-content: center;
  height: 200px;
  padding: 30px 0;
  & > div {
    // flex: 1;
    padding: 0 15px;
    img {
      width: 100px;
    }
    h3 {
      line-height: 30px;
    }
  }
  div.active {
    position: absolute;
    border-radius: 50%;
    transform: translate(-5px, -5px);
    width: 110px;
    height: 110px;
    background: #3b98ff;
    z-index: -5;
  }
  h3.active {
    color: #3b98ff;
  }
}
.set_date {
  height: 310px;
}
/deep/ .van-nav-bar__content {
  background-color: #f5f5f5;
}
.content {
  background-color: black;
}
.portrait {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 10px;
  position: relative;
}
/deep/ .van-cell__title {
  font-weight: bold;
}
.van-cell--clickable {
  line-height: 42px;
}
/deep/.van-cell__right-icon {
  line-height: 42px;
}
.portrait::after {
  content: "";
  background-image: url("../../assets/image/icon/m_undefind2.png");
  background-size: 30px 30px;
  position: absolute;
  height: 30px;
  width: 30px;
  left: calc(50% + 13px);
  top: calc(50% + 8px);
}
.title-pic {
  position: relative;
  left: -100px;
}
.out_login {
  width: 80%;
  left: 50%;
  margin-top: 20px;
  transform: translateX(-50%);
}
</style>
